<template>
  <div>
    <div v-for="item of projectList" :key="item.id" v-if="item.state === tag">
        <div class="row" @click="goPaceProjectDetail(item)">
            <span>
              <svg class="icon projectIcon" aria-hidden="true">
                <use xlink:href="#icon-"></use>
              </svg>
              {{item.name}}
            </span>
          <span class="delIcon">
              <svg class="icon fuzerenIcon" aria-hidden="true">
                <use xlink:href="#iconren"></use>
              </svg>
              {{item.managerName}}
            </span>
        </div>
      <el-progress :percentage="getPace(item.startTime,item.endTime)" class="paceMargin"></el-progress>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import axios from 'axios'
export default {
  name: 'paceList',
  data () {
    return {
      projectList: [],
      tag: this.Run
    }
  },
  methods: {
    goPaceProjectDetail (project) {
      sessionStorage.setItem('projectID', project.id)
      sessionStorage.setItem('projectName', project.name)
      sessionStorage.setItem('projectStartTime', project.startTime)
      sessionStorage.setItem('projectEndTime', project.endTime)
      this.$router.push('/projectPace')
    },
    getPace (sTime, eTime) {
      if (!sTime || !eTime) return ''
      sTime = new Date(sTime.replace(/-/g, '/'))
      eTime = new Date(eTime.replace(/-/g, '/'))
      console.log(sTime)
      console.log(eTime)
      let diff = eTime.getTime() - sTime.getTime()
      let dayDiff = Math.floor(diff / (24 * 3600 * 1000))
      let date = new Date()
      let nowDiff = date.getTime() - sTime.getTime()
      let nowDayDiff = Math.floor(nowDiff / (24 * 3600 * 1000))
      let num = (100 * nowDayDiff / dayDiff).toFixed(1)
      // alert(num)
      return parseFloat(num)
    },
    getProjectAll () {
      axios.get(this.url + '/project/all')
        .then(this.getProjectListSucc)
    },
    getProjectManager () {
      axios.get(this.url + '/project/manager/' + Cookies.get('id'))
        .then(this.getProjectListSucc)
    },
    getProjectMember () {
      axios.get(this.url + '/project/member/' + Cookies.get('id'))
        .then(this.getProjectListSucc)
    },
    getProjectListSucc (res) {
      if (res.status === 200) {
        res = res.data
        let projectList = this.projectList.concat(res)
        const arr = new Map()
        this.projectList = projectList.filter((projectList) => !arr.has(projectList.id) && arr.set(projectList.id, 1))
      } else alert(res.data)
    }
  },
  mounted () {
    let level = parseInt(Cookies.get('level'))
    if (level === this.PI) this.getProjectManager()
    else if (level === this.PR) {
      this.getProjectMember()
      this.getProjectManager()
    } else if (level === this.student) this.getProjectMember()
    else this.getProjectAll()
  }
}
</script>

<style lang="stylus" scoped>
  .right
    float: right
  .iconMargin
    margin-right .5rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .paceMargin
    margin-left .2rem

  .taskIcon
    color #16b0ff
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .5rem
  .fuzerenIcon
    margin-right .3rem
  .projectIcon
    margin-right .35rem
  .divider
    margin-top .5rem
</style>
